{% extends "base.html" %} {% block head %} {{ super() }}

<script src="{{url_for('static', filename='../static/js/zform.js')}}" type="text/javascript" charset="utf-8"></script>
<script src="{{url_for('static', filename='../static/js/ztable.js')}}" type="text/javascript" charset="utf-8"></script>
<script src="{{url_for('static', filename='../static/js/zui.js')}}" type="text/javascript" charset="utf-8"></script>

<script>
	$(document).ready(function(){
		var $Form = $('#item-form').ZForm({height:300,
				errors:{{ errors_json | safe }}
			});
		
		$Form.find('input[name="company_name"]').attr('value', '{{company_name}}');
		
		function picture_upload_done(fname, iid){
			$Form.find('input[name="pic_fname"]').val(fname);
			$Form.find('input[name="iid"]').val(iid);
		}
		
		function get_item_id(){
			return $Form.find('input[name="iid"]').val();
		}
		
		//Set fname field before send
		var $Uploader = $('#item-image-loader').ZImageUploader({
			url: "/preload_image/"+'{{company_name}}',
			get_item_id: get_item_id,
			before_click_cb:function(){},
			preload_done:picture_upload_done,
			n_max:1,
			width:108,
			height:108
		});
		
		$Form.find('button.submit').click(function(){
			var pic_fname = $Uploader.getFileName();
			$Form.find('input[name="pic_fname"]').val(pic_fname);
		});
		
		function load_item($Row){
			var pic_path = $Row.find('[name="pic_path"]').text();
			var iid = $Row.find('[name="iid"]').text();
			var file_name = pic_path.replace(/^.*[\\\/]/, '');
			var name = $Row.find('[name="name"]').text();
			var description = $Row.find('[name="description"]').text();
			var price = $Row.find('[name="price"]').text();
			
			$Form.find('input[name="mode"]').val('edit');
			$Form.find('input[name="pic_fname"]').val(file_name);
			$Form.find('input[name="iid"]').val(iid);
			$Form.find('input[name="name"]').val(name);
			$Form.find('[name="description"]').val(description);
			$Form.find('input[name="price"]').val(price);
			
			$Uploader.find('.z-frame-0').find('div').css("background-image","url("+ escape(pic_path)+")");
			$Uploader.find('.z-frame-0').find('div').css("background-size", "108px 108px");
		}
		var $Table = $('#item-table').ZTable({
			select_row_cb: load_item	
		});
		

	});
	
</script>

<title>Manage Companies</title>

{% endblock %}

{% block left_area %}
	{{ super() }}
	<div class="left-side-content">
		{% if user['role'] == 0 %}
		<div><a href="#">My Profile</a></div>
		{% elif user['role'] == 1 %}
		<div><a href="#">My Profile</a></div>
		<div><a href="/user_manager">User Management</a></div>
		{% endif%}
	</div>

{% endblock %}

{% block content %}

	<form id="item-form" action="/submit_item" method="post">
	
	<div class="form-left-side col-md-6">
		<div class="row form-group" name="name">
			<div class="col-md-5">
				<input class="form-control z-input" type="text" placeholder="{{ 'Menu Name' }}" />
			</div>
			<div class="col-md-5">
				<div class="z-label">{{ 'Menu Name' }}</div>
			</div>
		</div>

		<div class="row form-group" name="description">
			<div class="col-md-5">
				<textarea class="form-control z-input" rows="5" placeholder="{{ 'Description' }}"></textarea>
			</div>
			<div class="col-md-5">
				<div class="z-label">{{ 'Description' }}</div>
			</div>
		</div>

		<div class="row form-group" name="price">
			<div class="col-md-5">
				<input class="form-control" type="text" placeholder="{{ 'Price'}}" />
			</div>
			<div class="col-md-4">{{ 'Price' }}</div>
		</div>

		<input class="hide" type="text" name="mode" value="new"/>
		<input class="hide" type="text" name="company_name" value=""/>
		<input class="hide" type="text" name="pic_fname" value=""/>
		<input class="hide" type="text" name="iid" value=""/>
	</div>
			
	<div class="form-right-side col-md-6">	
		<div class="row">
			<div class="col-md-9">
				<ul id="item-image-loader" class="col-md-12">
				</ul>
			</div>
		</div>
	</div>	
		
		<div class="row col-md-11">
			<div class="btn-toolbar col-md-7 z-btn-area">
				<button type="submit" class="z-submit-btn submit btn btn-primary col-md-2">Submit</button>
			</div>
		</div>
	</form>



		<form id="item-list-form" action="/manage_items" method="post">
			<div class="panel-body">

				<div>
					<table id="item-table" class="table" mode="normal"
						style="height: 200px; overflow: auto;">
						<tbody>
							{% if items !=[] %}
								{% for item in items %}
									<tr>
									{% if user['role'] == "0" %}
										<td><input type="checkbox" name="selected" value="{{ None }}"></td>
									{% endif %}
										<td name="iid" class='hide'>{{ item['iid'] }}</td>
										<td name="pic_path" class='hide'>{{ item['pic_fpath'] }}</td>
										<td name="name">{{item['name']}}</td>
										<td name="description">{{item['description']}}</td>
										<td name="price">{{item['price']}}</td>
									</tr>
								{% endfor %}
							{% endif %}
						</tbody>
					</table>
				</div>
				<br />
				<p>Rows 1-10 of 48</p>
			</div>

		</form>

{% endblock %}

{% block right_area %}
	<div class="right-side-area col-md-2">
	
	</div>
{% endblock %}